<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="libs/js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="libs/carhartl-jquery-cookie-v1.4.1-0-g7f88a4e/carhartl-jquery-cookie-92b7715/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
	<script src="libs/jquery-validation-1.14.0/dist/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="libs/css/register.css"/>
	<body>
		<div id="head">
		</div>
		<div id="content">
			<table >
				<tr><td>手机/邮箱：</td><td><input type="text" id="phone" name="" style="border: 1px solid black;"/></td><td id="tip0"></td></tr>
				<tr><td>密码：</td><td><input type="password" name="" id="username" value="" style="border: 1px solid black;"/></td><td id="tip1"></td></tr>
				<tr><td>确认密码：</td><td><input type="password" name="" id="password" value="" style="border: 1px solid black;"/></td><td id="tip2"></td></tr>
				<tr><td></td><td><input type="checkbox"/><a href="#">订阅美西时尚</a></td></tr>
				<tr><td></td><td><button>注册</button></td></tr>
				<tr><td></td><td>已注册？<a href="login.html"  style="color: red;">登录</a></td></tr>
			</table>
		</div>
		<div id="foot"></div>
		<script type="text/javascript">
		$(function(){
			$('#head').load('head.html?_='+Math.random());
			$('#foot').load("footer.html?_="+Math.random());
			//设置变量辅助验证 a b c
			var a=0;
			var b=0;
			var c=0;
			$('input[type=text]').change(function(){
				var str=$('input[type=text]').val();
				//可以输入电话或者邮箱电话必须是1开头的11位数字
				//邮箱必须是邮箱格式
				var filter = /^1\d{10}$/;
				var filter0 = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
				if(filter0.test(str)||filter.test(str)){
					console.log('用户名成功');
					$('#tip0').text("*用户名通过").css({'color':'green'});
					a=1;
				}else{
					a=0;
					$('#tip0').text("*用户名有误").css({'color':'red'});
				}
				
			});
			$('input[type=password]').eq(0).change(function(){
				var str=$('input[type=password]').eq(0).val();
				//6到22位任意字符
				var filter = /[\w\W]{6,22}$/;
				if(filter.test(str)){
					console.log('密码'+str);
					$('#tip1').text('密码设置成功!').css({'color':'green'});
					b=1;
				}else{
					$('#tip1').text('请输入6到22位任意字符').css({'color':'red'});
					console.log('6到22密码');
					b=0;
				}
			});
			$('input[type=password]').eq(1).change(function(){
				//取出两次输入的密码进行比较
				var str0=$('input[type=password]').eq(0).val();
				var str1=$('input[type=password]').eq(1).val();
				if(str0==str1&&str0!=""){
					$('#tip2').text("密码一致").css({'color':'green'});
					console.log('重复密码'+str1);
					c=1;
				}else{
					$('#tip2').text("密码不一致").css({'color':'red'});
					console.log('请再次输入');
					c=0
				}
			});
			
			//空数组，用来保存注册信息
			//注册
			var arr=[];
			$("button").click(function(){
				//取得输入值
				var str0=$('input[type=text]').eq(0).val();
				var str1=$('input[type=password]').eq(0).val();
				var sum=a+b+c;
				//判断输入信息能否通过
				if(sum==3){
					//首先要判断输入的内容在JSON中有没有，若重复，拒绝注册
					var obj = $.cookie('userInfo');
					console.log(obj);
					if(obj){
						var getInfo = JSON.parse(obj);
						//把cookie给取下来,如果没有内容直接注册，如果有内容循环一下，是否与输入的内容有重复
						//如果有重复,不给注册,如果没有重复给于注册
						//设定一个比较用的数组,用来存放用户名
						var compare = [];
						for(var i=0;i<getInfo.length;i++){
							compare.push(getInfo[i].name);
						}
						console.log(compare);
						//用inArray方法判断是否在数组里面,不存在证明没有被注册过，没注册过的就注册进去
						if($.inArray(str0,compare)!=-1){
							console.log('用户已存在');
							alert("用户名已存在，请重新输入");
							window.location.reload();
						}else{
							var user = {"name":str0,"pass":str1};
							arr.push(user);
							var json = JSON.stringify(arr);
							$.cookie('userInfo',json,{expires:7});
							console.log("成功储存:"+json);
							alert("恭喜您注册成功");
							window.location.href = "homePage.html";
						}
					}else{
						var user={"name":str0,"pass":str1};
						arr.push(user);
						var json = JSON.stringify(arr);
						$.cookie('userInfo',json,{expires:7});
						alert("恭喜您注册成功");
						window.location.href = "homePage.html";
					}
				}else{
					console.log('没按正常套路出牌');
				}
			});
			
		});
		</script>
	</body>
</html>
